<template>
	<view class="wp_-flex-col page">
		<!-- 顶部用户信息 -->
		<view class="header-section">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="section">
				<view class="user-info">
					<!-- 未登录状态 -->
					<template v-if="!isLogin">
						<view class="user-content" @tap="handleLogin">
							<view class="user-left">
								<image class="avatar" src="/static/my/default-avatar.png" mode="aspectFill" />
								<view class="info-wrap">
									<text class="nickname">点击授权登录</text>
									<text class="desc">登录后享受更多权益</text>
								</view>
							</view>
							<view class="login-btn">
								<text class="btn-text">去登录</text>
								<u-icon name="arrow-right" size="24" color="#fff"></u-icon>
							</view>
						</view>
					</template>
					
					<!-- 已登录状态 -->
					<template v-else>
						<view class="user-content">
							<view class="user-left">
								<image class="avatar" :src="userInfo.avatarUrl || '/static/my/default-avatar.png'" mode="aspectFill" />
								<view class="info-wrap">
									<text class="nickname">{{userInfo.nickName}}</text>
									<text class="desc">{{userInfo.phone}}</text>
								</view>
							</view>
							<view class="setting-btn" @tap="goToSetting">
								<u-icon name="setting-fill" size="32" color="#fff"></u-icon>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<!-- 登录后显示资产信息 -->
		<template v-if="isLogin">
			<view class="assets-box">
				<view class="asset-item" @tap="goToPoints">
					<text class="asset-value">366</text>
					<text class="asset-label">积分</text>
				</view>
				<view class="asset-item" @tap="goToCoupons">
					<text class="asset-value">2</text>
					<text class="asset-label">优惠券</text>
				</view>
				<view class="asset-item" @tap="goToRecharge">
					<text class="asset-value">¥0</text>
					<text class="asset-label">余额 (元)</text>
				</view>
			</view>
		</template>

		<!-- 功能列表 -->
		<view class="feature-box">
			<view class="feature-title">我的服务</view>
			<view class="feature-list">
				<view 
					class="feature-item" 
					v-for="(item, index) in features" 
					:key="index" 
					@tap="handleFeatureClick(item)"
				>
					<view class="item-left">
						<u-icon :name="item.icon" size="30" color="#333"></u-icon>
						<text class="feature-name">{{item.name}}</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="15"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			isLogin: false,
			userInfo: {},
			features: [
				{ name: '我的订单', icon: 'order', type: 'order' },
				{ name: '收货地址', icon: 'map', type: 'address' },
				{ name: '联系客服', icon: 'phone', type: 'service' },
				{ name: '充值记录', icon: 'file-text', type: 'recharge-record' },
				{ name: '领取优惠', icon: 'gift', type: 'receive' },
				{ name: '资料设置', icon: 'account', type: 'settings' }
				]
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	},
	onShow() {
		// 检查登录状态
		const token = uni.getStorageSync('token')
		if (!token) {
			this.isLogin = false
			this.userInfo = {}
			return
		}
		
		// 已登录则更新用户信息
		const userInfo = uni.getStorageSync('userInfo')
		if (userInfo) {
			this.isLogin = true 
			this.userInfo = userInfo
		} else {
			this.isLogin = false
			this.userInfo = {}
		}
	},
	methods: {
		// 处理登录点击
		handleLogin() {
			uni.showLoading({
				title: '登录中...'
			})
			
			// 获取用户信息
			uni.getUserProfile({
				desc: '用于完善会员资料',
				success: (res) => {
					const userInfo = res.userInfo
					
					// 获取手机号
					uni.login({
						success: () => {
							uni.hideLoading()
							// 这里应该调用后端接口获取手机号，这里模拟一个
							const phone = '183****1923'
							
							// 保存信息
							const userData = {
								avatarUrl: userInfo.avatarUrl,
								nickName: userInfo.nickName,
								phone: phone
							}
							
							// 保存登录状态和用户信息
							uni.setStorageSync('token', 'mock_token')
							uni.setStorageSync('userInfo', userData)
							
							// 更页面状态
							this.isLogin = true
							this.userInfo = userData
							
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})
						}
					})
				},
				fail: () => {
					uni.hideLoading()
					uni.showToast({
						title: '登录失败',
						icon: 'none'
					})
				}
			})
		},
		goToSetting() {
			uni.navigateTo({
				url: '/pages/my/settings',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		},
		handleFeatureClick(item) {
			switch(item.type) {
				case 'order':
					uni.switchTab({
						url: '/pages/order/order'
					})
					break
				case 'address':
					uni.navigateTo({
						url: '/pages/address/address'
					})
					break
				case 'service':
					uni.makePhoneCall({
						phoneNumber: '400-xxx-xxxx'
					})
					break
				case 'recharge-record':
					uni.navigateTo({
						url: '/pages/my/recharge-record'
					})
					break
				case 'receive':
					uni.navigateTo({
						url: '/pages/coupon/receive'
					})
					break
				case 'settings':
					uni.navigateTo({
						url: '/pages/my/settings'
					})
					break
			}
		},
		goToPoints() {
			uni.navigateTo({
				url: '/pages/points/mall',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		},
		goToCoupons() {
			uni.navigateTo({
				url: '/pages/coupon/coupon',
				animationType: 'slide-in-right',
					animationDuration: 300
			})
		},
		goToRecharge() {
			uni.navigateTo({
				url: '/pages/my/recharge',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.header-section {
		background: linear-gradient(180deg, #8cd548 0%, #6ab52e 100%);
		padding: 0 30rpx 120rpx;
		
		.status-bar {
			width: 100%;
		}
		
		.section {
			padding-top: 88rpx;
			
			.user-info {
				.user-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;
					
					.user-left {
						display: flex;
						align-items: center;
						
						.avatar {
							width: 140rpx;
							height: 140rpx;
							border-radius: 50%;
							border: 4rpx solid rgba(255, 255, 255, 0.3);
							box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
						}
						
						.info-wrap {
							margin-left: 32rpx;
							
							.nickname {
								font-size: 36rpx;
								color: #fff;
								font-weight: 600;
								margin-bottom: 12rpx;
								display: block;
							}
							
							.desc {
								font-size: 26rpx;
								color: rgba(255, 255, 255, 0.85);
								display: block;
							}
						}
					}
					
					.setting-btn {
						width: 88rpx;
						height: 88rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&:active {
							opacity: 0.8;
						}
					}
					
					.login-btn {
						display: flex;
						align-items: center;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 100rpx;
						padding: 20rpx 40rpx;
						border: 1px solid rgba(255, 255, 255, 0.25);
						transition: all 0.3s;
						
						text {
							font-size: 30rpx;
							color: #fff;
							margin-right: 12rpx;
						}
						
						&:active {
							transform: scale(0.95);
							background: rgba(255, 255, 255, 0.25);
						}
					}
				}
			}
		}
	}
	
	.feature-box {
		margin: 20rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		
		.feature-title {
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 24rpx;
			padding: 0 8rpx;
		}
		
		.feature-list {
			.feature-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				border-bottom: 1px solid #f5f5f5;
				
				.item-left {
					display: flex;
					align-items: center;
					
					.feature-name {
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
				
				&:active {
					background: #f8f8f8;
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
	
	.assets-box {
		margin: 20rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		
		.asset-item {
			flex: 1;
			text-align: center;
			position: relative;
			padding: 12rpx 0;
			
			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1rpx;
				height: 36rpx;
				background: #eee;
			}
			
			.asset-value {
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
				display: block;
				line-height: 1.4;
			}
			
			.asset-label {
				font-size: 24rpx;
				color: #999;
				margin-top: 4rpx;
				display: block;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}
</style>